<template>
  <div>
    <div id="commerence">
      <div class="commerence-top">
        <div>
          <div class="titel-box">商会介绍</div>
          <div class="commerence" @click="open2">{{ mtdata.dept_name }}</div>
        </div>
        <!-- <div class="image-box">
          <img v-if="mtdata.avatar" :src="mtdata.avatar" alt="">
          <img v-else src="../../assets/images/profile.jpg" alt="">
        </div> -->
      </div>
      <div class="commerence-bottom" @click="open2">{{ mtdata.description }}
      </div>
    </div>
    <Bigscreen :openBigscreendialog="opendemand2" @changeBigscreen="opendemandval2"></Bigscreen>
  </div>
</template>

<script>
import { commerencemessage } from '@/api/bigscreen/bigscreen.js'
import Bigscreen from '@/views/introduceprop/introduceprop.vue'

export default {
  components: { Bigscreen },
  data() {
    return {
      opendemand2: false,
      mtdata: ''
    }
  },
  mounted() {
    this.getCommerence()
  },
  methods: {
    open2() {
      this.opendemand2 = true;
    },
    opendemandval2(val){
      this.opendemand2 = val;
    },
    getCommerence() {
      commerencemessage().then(res => {
        if (res.code === 200) {
          const { data } = res
          this.mtdata = data
        }
      })
    }
  }
}
</script>

<style lang="scss">
// 设置变量颜色
$color-blue: #0d3d7f;
$font-color: #09f5fc;
$text-color: #fff;
#commerence {
  padding: 20px 15px;
  // background-color: $color-blue;
  color: $text-color;
  //  margin-top: 40px;
  & > .commerence-top {
    display: flex;
    justify-content: space-between;

    .titel-box {
      color: $font-color;
    }

    .commerence {
      margin: 40px 10px;
    }

    //   .image-box {
    //     width: 200px;
    //     height: 120px;
    //     margin-bottom: 40px;
    //  & > img {
    //   width: 100%;
    //   height: 100%;
    //  }
    // }
  }

  & > .commerence-bottom {
    font-size: 18px;
  }
}
</style>
